<template>
  <div
    v-if="data.user?.is_manage == 1"
    class="fix-top position-fixed top-160rpx left-0 right-0 rd-5 z-99 bg-#fff color-#3c3d3c font-size-32rpx"
    w="90%"
    mx-a
    h-120rpx
    line-height-80rpx
    text-center
  >
    <span>商户开启用预约通知</span
    ><span bg-yellow p-2 ml-1 rd-3 @click="handleManagerSubscribe">一键订阅</span>
  </div>
  <view>
    <view class="uni-padding-wrap">
      <view class="page-section swiper">
        <view class="page-section-spacing">
          <swiper
            class="swiper"
            circular="true"
            indicator-dots="true"
            autoplay="true"
            interval="3500"
            duration="600"
          >
            <swiper-item
              class="swiper-item-box"
              v-for="(item, index) in data.bannerList"
              :key="index"
            >
              <view class="swiper-item uni-bg-red">
                <image class="swiper-img" :src="item.imageUrl" mode="aspectFit"></image>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
    </view>
    <!-- 模块功能 -->
    <view class="cu-list grid solids-bottom col-4 no-border">
      <view
        class="cu-item"
        v-for="(item, index) in data.categories"
        :key="index"
        :style="{ animation: 'show ' + ((index + 1) * 0.2 + 1) + 's 1' }"
        @click="navigator(item.path as PATH, item)"
        :data-mid="item.mid"
      >
        <view :class="['cuIcon-' + item.cuIcon, 'text-' + item.color]">
          <view class="cu-tag badge" v-if="item.badge != 0">
            <view v-if="item.badge != 1">{{ item.badge > 99 ? '99+' : item.badge }}</view>
          </view>
        </view>
        <text>{{ item.name }}</text>
      </view>
    </view>
    <!-- 首页主要板块 -->
    <div class="main-unit pb-120rpx">
      <div
        class="item mb-20rpx p-20rpx card-modal b-rounded-26rpx mx-22rpx"
        v-for="(unit, index) in data.results"
        :key="index"
      >
        <div class="content flex flex-nowrap m-l-2 w-100%" @click="detailProduct(unit)">
          <u-image
            width="200rpx"
            height="200rpx"
            :src="handleSingleUnitImg(unit)"
            mode="aspectFill"
          ></u-image>
          <div class="detail flex-col flex m-l-2 justify-between">
            <view>{{ unit.title }}</view>
            <div class="sub color-gray font-size-26"> {{ unit.sub_title }} </div>
            <div class="main color-primary font-size-32"> {{ unit.price || '-' }} </div>
          </div>
        </div>
      </div>
    </div>
  </view>
</template>
<script setup lang="ts">
  import { USER_INFO_KEY } from '@/enums/cacheEnum';
  import { PATH_COLLECTIONS } from '@/enums/routerEnum';
  import { getCache, storage } from '@/utils/catch';
  import { SubscribeTempIdEnum } from '@/enums/subscribe';
  import { getProductHome } from '@/services/api/products/products';
  import { router } from '@/utils/router';
  import { handleSingleUnitImg } from '../pageFun/index';
  import menuList from './menu';

  let dataList = ref<any[]>([]);

  onMounted(async () => {
    // const rows = await getJobList({});
    // console.log('rows: ', rows);
    // dataList.value = rows.data;
  });

  type PATH = keyof typeof PATH_COLLECTIONS;
  // const handleGetStarted = () => {
  //   router.pushTab('/pages/demo/index');
  // };

  const data = reactive({
    results: [],
    user: getCache(USER_INFO_KEY),
    categories: menuList,
    bannerList: [
      {
        imageUrl: 'https://pic.616pic.com/bg_w1180/00/08/19/PNtPkCR8Uz.jpg',
      },
      {
        imageUrl: 'https://www.duooo.net/static/upload/image/20220825/1661409441147093.jpg',
      },
      {
        imageUrl: 'https://www.travel.taipei/image/108007/?r=1539253822284',
      },
      {
        imageUrl:
          'https://images.sbs.com.au/dims4/default/ccce723/2147483647/strip/true/crop/910x512+0+65/resize/1280x720!/quality/90/?url=http%3A%2F%2Fsbs-au-brightspot.s3.amazonaws.com%2Fdrupal%2Fyourlanguage%2Fpublic%2Fpodcast_images%2Fbamboo_forest_piqsels_4.jpg',
      },
    ],
  });

  onMounted(() => {
    initUnitShow();
  });

  // 商品详情
  const detailProduct = (row: any) => {
    router.navigate('/pages/footer/news/productView', { id: row.id });
  };

  const initUnitShow = () => {
    getProductHome({}).then((result) => {
      data.results = result.data.list;
    });
  };
  const getSubscribeMessage = () => {};
  const navigator = (_: PATH, item?: any) => {
    if (item.type == 'tel') {
    }
    if (!_ && item.appid) {
      uni.navigateToMiniProgram({
        appId: item.appid,
        path: item.location,
        extraData: item.sence,
      } as any);
      return;
    }
    router.push(_, item, {
      fail(err) {
        throw Error(err);
      },
    });
  };
  const handleManagerSubscribe = () => {
    uni.requestSubscribeMessage({
      tmplIds: [SubscribeTempIdEnum.businessNotice],
      success(resp) {
        console.log(resp);
        uni.showToast({
          title: '订阅成功',
          icon: 'success',
          mask: true,
        });
      },
      fail(err) {
        console.log(err);
      },
    });
  };
</script>
<style lang="scss" scoped>
  .swiper {
    height: 420rpx !important;
    .swiper-item-box {
      height: 500rpx !important;
      .swiper-img {
        height: 500rpx !important;
      }
    }
  }

  .message-box {
    width: 100%;
    height: 120rpx;
    background: url(https://zhoukaiwen.com/img/icon/clock.gif) #ffffff;
    background-repeat: no-repeat;
    background-size: 100rpx 100rpx;
    background-position: 15rpx 10rpx;
    margin: 0rpx 0rpx 10rpx 0rpx;
    padding-left: 130rpx;

    .message-tltle {
      height: 65rpx;
      line-height: 70rpx;
      font-weight: 600;
      font-size: 28rpx;
    }

    .message-content {
      color: #0081ff;

      span {
        background-color: #0081ff;
        color: #ffffff;
        padding: 2rpx 8rpx;
        border-radius: 8rpx;
        margin-right: 8rpx;
      }
    }
  }

  /*scroll-view外层*/
  .skill-sequence-panel-content-wrapper {
    position: relative;
    white-space: nowrap;
    padding: 10rpx 0 10rpx 10rpx;
  }

  /*左右渐变遮罩*/
  .hide-content-box {
    position: absolute;
    top: 0;
    height: 100%;
    width: 10px;
    z-index: 2;
  }

  .hide-content-box-left {
    left: 0;
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0), #f3f3f3 60%);
  }

  .hide-content-box-right {
    right: 0;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #f3f3f3 60%);
  }

  .kite-classify-scroll {
    width: 100%;
    height: 380rpx;
    overflow: hidden;
    white-space: nowrap;
  }

  .kite-classify-cell {
    display: inline-block;
    width: 266rpx;
    height: 370rpx;
    margin-right: 20rpx;
    background-color: #ffffff;
    border-radius: 10rpx;
    overflow: hidden;
    box-shadow: 2px 2px 3px rgba(26, 26, 26, 0.2);
  }

  .nav-li {
    padding: 40rpx 30rpx;
    width: 100%;
    background-image: url(https://s1.ax1x.com/2020/06/27/NyU04x.png);
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
  }

  .nav-name {
    font-size: 28upx;
    text-transform: Capitalize;
    margin-top: 20upx;
    position: relative;
  }

  .nav-name::before {
    content: '';
    position: absolute;
    display: block;
    width: 40rpx;
    height: 6rpx;
    background: #fff;
    bottom: 0;
    right: 0;
    opacity: 0.5;
  }

  .nav-name::after {
    content: '';
    position: absolute;
    display: block;
    width: 100rpx;
    height: 1px;
    background: #fff;
    bottom: 0;
    right: 40rpx;
    opacity: 0.3;
  }

  .nav-content {
    width: 100%;
    padding: 15rpx;
    display: inline-block;
    overflow-wrap: break-word;
    white-space: normal;
  }

  .nav-btn {
    width: 200rpx;
    height: 60rpx;
    margin: 8rpx auto;
    text-align: center;
    line-height: 60rpx;
    border-radius: 10rpx;
  }

  .bg-index1 {
    background-color: #19cf8a;
    color: #fff;
  }

  .bg-index2 {
    background-color: #954ff6;
    color: #fff;
  }

  .bg-index3 {
    background-color: #5177ee;
    color: #fff;
  }

  .bg-index4 {
    background-color: #f49a02;
    color: #fff;
  }

  .bg-index5 {
    background-color: #ff4f94;
    color: #fff;
  }

  .bg-index6 {
    background-color: #7fd02b;
    color: #fff;
  }

  .item-name {
    margin-bottom: 15rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }

  .main-content {
    background-color: #fff;

    .content-wrap {
      padding: 12rpx 20rpx;
      font-size: 36rpx;
      color: #353535;
      border-bottom: 2rpx solid #c3c3c3;
    }
  }
</style>
